<template>
	<view style="padding-bottom: 80rpx;">
		<view class="inputBox">
			<u-search placeholder="请输入商家名称" v-model="keyword" bgColor="#FFFFFF" :showAction="false"></u-search>
		</view>
		<view class="nav">
			<u-tabs :current="check - 1" :itemStyle="{ width:'25%',height:'80rpx'}"
				:activeStyle="{ color: '#E84E22' , fontSize:'32rpx' }" lineColor='#E84E22'
				:inactiveStyle="{ color: '#666666',fontSize: '28rpx' }" :list="list1" @click="click"></u-tabs>
		</view>
		<view style="margin-top: 230rpx;">
			
		</view>
		<view class="bigBox" v-for="(item,index) in list" :key="index" @click="toMerNotes(item.id)">
			<view class="liBox">
				<view class="title">
					{{item.comName}}
				</view>
				<view class="timeBox">
					<view class="time">
						{{item.createTime}}
					</view>
					<image class="timeIcon" src="../../static/images/minde/arrow.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		businessPage
	} from "@/api/work/work.js"
	import common from "@/components/time/time.js"
	export default {
		data() {
			return {
				keyword:'',
				check:1,
				list1:[{
					name: '全部',
					type: 1
				}, {
					name: '待审核',
					type: 2
				}, {
					name: '已通过',
					type: 3
				}, {
					name: '未通过',
					type: 4
				}],
				list:[],//订单数据
				pageNum: 1,//页码
				listnum:0,//列表长度
				status:'',//订单状态
			}
		},
		//触底加载
		onReachBottom(){
			let that = this
			if(that.list.length == that.listnum){
				uni.showToast({
					title:'没有更多了',
					icon:"none"
				})
			}else{
				that.pageNum = that.pageNum +1
				that.getData()
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			//跳转商户申请记录详情
			toMerNotes(e){
				this.$tab.navigateTo('/pagesA/merNotes/merNotes?id=' + e)
			},
			click(item) {
				if(item.type==1){
					this.list = []
					this.status = ''
					this.getData()
				}else if(item.type==2){
					this.list = []
					this.status = 0
					this.getData()
				}else if(item.type==3){
					this.list = []
					this.status = 1
					this.getData()
				}else if(item.type == 4){
					this.list = []
					this.status = 2
					this.getData()
				}
			},
			//获得分页数据
			getData(){
				let that = this
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				let data = {
					pageNo:that.pageNum,
					pageSize:10,
					processStatus:that.status,
					storeName:that.keyword
				}
				businessPage(data).then(response => {
					uni.hideLoading()
					that.listnum = response.data.total
					if(that.list.length<response.data.total){
						// that.list = that.list.concat(res.data.rows)
						that.list = that.list.concat(response.data.list)
						that.list = that.list.map(item =>{
							item.createTime = common.tiem(item.createTime)
							return item
						})
					}
				})
			},
		}
	}
</script>

<style>
.inputBox {
		width: 690rpx;
		height: 60rpx;
		/* margin: 30rpx auto; */
		position: fixed;
		top: 30rpx;
		left: 30rpx;
		z-index: 1;
	}
	.nav {
		width: 750rpx;
		height: 100rpx;
		background-color: white;
		border-top: 2rpx solid #F1F1F1;
		position: fixed;
		top: 110rpx;
		z-index: 1;
	}
	.bigBox{
		width: 690rpx;
		height: 100rpx;
		margin: 20rpx auto 0 auto;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
	.liBox{
		width: 630rpx;
		height: 100rpx;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 100rpx;
	}
	.title{
		width: 300rpx;
		height: 100rpx;
		font-size: 28rpx;
		color: #333333;
		overflow: hidden;
		 white-space: nowrap;
		  text-overflow: ellipsis;
		  -o-text-overflow:ellipsis;
	}
	.timeBox{
		width: 250rpx;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.time{
		width: 220rpx;
		height: 100rpx;
		font-size: 24rpx;
		color: #666666;
	}
	.timeIcon{
		width: 20rpx;
		height: 28rpx;
	}
</style>
